<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anchor</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            color: white;
            background-color: #4f2c6c;
        }
        .head{
            height: 80px;
            line-height: 64px;
            padding: 8px 16px;
            box-sizing: border-box;
        }
        .head1{
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            width: 98%;
            padding: 0 15px;
        }
        .head1>ul{
            display: flex;
        }
        .head1>:last-child{
            all: unset;
            width: 200px;
            height: 40px;
            line-height: 40px;
            color: black;
            margin-right: 0;
            border-radius: 20px;
            background-color: #09e9af;
        }
        .head1 li{
            margin-right: 40px;
        }
        .body{
            width: 98%;
            display: flex;
            justify-content: center;
            height: 380px;
            margin-top: 160px;
        }
        .left{
            text-align: center;
        }
        .left>:first-child{
            font-size: 4.5rem;
            font-weight: 300;
            line-height: 1.2;
        }
        .left>:nth-child(2){
            font-size: 22px;
            margin: 20px auto;
        }
        .left>:last-child{
            border: 1px solid white;
            width: 150px;
            height: 50px;
            border-radius: 30px;
            text-align: center;
            line-height: 50px;
            margin: 20px auto;
        }

        .right>img{
            width: 100%;
        }
        @media screen and (max-width: 992px){
            .head1>ul>:nth-child(2){
                display: none;
            }
            .head1>ul>:nth-child(3){
                display: none;
            }
            .head1>ul>:nth-child(4){
                display: none;
            }
            .head1>:last-child{
                all: unset;
                width: 40px;
                height: 40px;
                background-color: white;
                display: block;
                border-radius: 10px;
            }
            .body{
                display: block;
                width: 80%;
                margin: 100px auto;
            }

        }
        @media screen and (max-width: 760px){
            .left>:first-child{
                font-size: 2rem;
            }
        }
        @media screen and (max-width: 230px){
            .left>:last-child{
                width: 80%;
            }
        }
    </style>
</head>
<body>
<div class="head">
    <div class="head1">
    <ul>
        <li>Anchor UI Kit</li>
        <li>Intro</li>
        <li>Examples</li>
        <li>Docs</li>
    </ul>
    <button></button>
    </div>
</div>
<div class="body">
    <div class="left">
        <p>Build something nice & easy</p>
        <p>With this FREE Bootstrap 4.1.3 UI Kit &</p>
        <div>Learn more</div>
    </div>
    <div class="right">
        <img src="https://anchor.bootmb.com/assets/img/demo/dashb.png">
    </div>
</div>
</body>
</html>